import { Component } from "react";
// class DemoB extends Component{
//   constructor() {
//     super();
//     console.log(2);
//   };
//   componentDidMount() {
//     console.log(1);
//   };
//   render() {
//     console.log(3);
//     return (
//       <div>dsad</div>
//     )
//   }
// }
// class DemoB extends Component {
//   constructor() {
//     super();
//     console.log(3);
//     this.state = {
//       counter:1
//     }
//   };
//   add() {
//     this.setState({
//       counter:this.state.counter+1
//     })
//     console.log(4);
//   }
//   componentDidMount() {
//     console.log(1);
//   };
//   render() {
//     console.log(2);
//     console.log(this.props);
//     return (
//       <div>
//         <h3>{this.state.counter}</h3>
//         <button onClick={()=>this.add()}>+1</button>
//       </div>
//     )
//   }
// }
// class DemoB extends Component {
//   constructor() {
//     super();
//     this.state = {
//       counter: 1
//     }
//   }
//   add() {
//     this.setState({
//       counter: this.state.counter + 1
//     })
//   }
//   render() {
//     let { a, b } = this.props;
//     let { counter } = this.state;
//     console.log(a, b);
//     return (
//       <div>
//         <h3>{counter}</h3>
//         <button onClick={() => this.add()}>+1</button>
//       </div>
//     )
//   }
// }

// class DemoB extends Component{
//   constructor() {
//     super();
//   }
//   componentDidMount() {
//     this.refs.box.style.color="red"
//   }
//   render() {
//     return (
//       <h1 ref="box">leu</h1>
//     )
//   }
// }

// import { useState } from "react";
// function DemoB() {
//   let [counter, setCounter] = useState(1)
//   return (
//     <div>
//       <h1>hans{counter}</h1>
//       <button onClick={()=>setCounter(counter+1)}>+1</button>
//     </div>
//   )
// }
import { useState,useEffect,useRef } from "react";
function DemoB() {
  let [counter, setCounter] = useState(1)
  let box = useRef(null)

  useEffect(() => {
    console.log("页面渲染完成/更新完成~");
    console.log(box.current.style.color = "blue");
  }, [counter]);
  return (
    <div>
      <h1 ref={box}>hans{counter}</h1>
       <button onClick={()=>setCounter(counter+1)}>+1</button>
    </div>
  )
}

export default DemoB;